<template>
    <div id="solo_compete_list">
        <div class="row">
            <div class="col-md-12">
                <el-table :data="data" size="small" :default-sort="{prop:'SortIndex', order:'ascending'}" border style="width: 100%">
                    <el-table-column align="center" prop="SortIndex" label="序号" width="60"></el-table-column>
                    <el-table-column align="center" prop="Compete.PassportNo" label="通行证" width="150"></el-table-column>
                    <el-table-column align="center" label="国家地区" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.Compete.Team!=null">{{scope.row.Compete.Team.Leader.User | location}}</span>
                            <span v-if="scope.row.Compete.Passport!=null">{{scope.row.Compete.Passport.User | location}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="姓名/团队" width="200">
                        <template slot-scope="scope">
                            <user-detail v-if="!authorize(['USER']) && scope.row.Compete.Passport != null" :user="scope.row.Compete.Passport.User"></user-detail> 
                            <span v-if="authorize(['USER']) && scope.row.Compete.Passport != null">
                                {{scope.row.Compete.Passport.User.Name}}
                            </span>
                            <span v-if="scope.row.Compete.Team != null">
                                <li class="fa fa-users"></li>
                                {{scope.row.Compete.Team.Name}}
                                (<user-detail v-if="!authorize(['USER'])" :user="scope.row.Compete.Team.Leader.User"></user-detail>
                                <span v-if="authorize(['USER'])">{{scope.row.Compete.Team.Leader.User.Name}}</span>)
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="团队成员" width="350" v-if="hasEnsemble">
                        <template slot-scope="scope" v-if="scope.row.Compete.Team!=null">
                            <div v-for="(member, index) in scope.row.Compete.Team.Members" style="display: inline;">
                                <user-detail v-if="!authorize(['USER'])" :user="member.User"></user-detail>
                                <span v-if="authorize(['USER'])">{{member.User.Name}}</span>
                                <span v-if="index < scope.row.Compete.Team.Members.length-1">, </span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="Compete.MusicName" label="比赛曲目"></el-table-column>
                    <el-table-column align="center" prop="Compete.Composer" label="作曲" width="120"></el-table-column>
                    <el-table-column align="center" prop="Compete.Arranger" label="编曲" width="120"></el-table-column>
                    <el-table-column align="center" prop="Compete.Accompany" label="伴奏" width="120"></el-table-column>
                    <el-table-column align="center" label="报名时间" width="160">
                        <template slot-scope="scope">
                            <span>{{scope.row.Compete.CreateTime | localtime}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>

import UserDetail from 'views/user/user_detail.vue';
import {LocaltimeFormat, LocationStringFormatFromUser} from 'web/utils';

export default {
    props: {
        'data': {
            type: Array,
            default: null
        },
    },
    components: {
        UserDetail
    },
    filters: {
        location: LocationStringFormatFromUser,
        localtime: LocaltimeFormat
    },    
    data() {
        return {
            hasEnsemble: false
        }
    },
    mounted() {
        for(let sc of this.data) {
            let compete = sc.Compete;
            if (compete.CompeteEvent.indexOf('SOLO') == -1) {               
                this.hasEnsemble = true;
                break;
            }
        }
    }
}
</script>

<style>

</style>
